<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var productsData = new BaseListDataProvider();
productsData.elements = [ {
		id : '1001',
		name : 'iphone',
		price : 1234.00
	}, {
		id : '1002',
		name : 'galaxy',
		price : 4566.00
	}, {
		id : '1003',
		name : 'nokia',
		price : 333333.00
	}, {
		id : '1007',
		name : 'palm',
		price : 121717.00
	}, {
		id : '1008',
		name : 'lg',
		price : 45456.00
	} ];
	
// set initial sort status
productsData.sort('name', 1);	
</script>

<script id="sorting" type="text/html">
<taglib>
	<tag id="sortheader" >
		<th class="header headerSort#{$data.getSortStatus('$columnName')}" 
			onclick="#{$data.toggleSort('$columnName')}">$columnName</th>
	</tag>
</taglib>
</script>

<div id="Sortselection">
<script id="Sortselection_template" type="text/html">
<div xmlns:tparts="page:sorting">
  <table class="tablesorter" border="0" cellpadding="0" cellspacing="1" >
	<thead>
	<tr>
		<tparts:sortheader columnName="id" data=".productsData" />
		<tparts:sortheader columnName="name" data=".productsData" />
		<tparts:sortheader columnName="price" data=".productsData" />
	</tr>
	</thead>
	<tbody>
	<loop value="#{.productsData.elements}" var="row" indexVar="index">
		<tr onclick="#{.productsData.selectRow(.row)}"
			class="#{(.row.selected ? 'selected' : '') + ' '+ (.index % 2 == 1 ? 'odd' : '')}">
			<td style="width: 50px">#{.row.id}</td>
			<td style="width: 100px">#{.row.name}</td>
			<td style="width: 100px">#{.row.price}</td>
		</tr>
	</loop>
	</tbody>
  </table>
</div>
</script>
</div>

<script>
	$(document).ready( function() { 
		// init context
		var gnatooContext = window.gnatoo.initByName('Sortselection'); 

		// bind model
		gnatooContext.data['productsData'] = productsData;

		//alert(''+gnatooContext.data.productsData.elements);
		// render
		gnatooContext.render();
	});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


